<template>
  <div id="app">
    <transition :enter-active-class="current">
      <router-view></router-view>
    </transition>
    <div class="tabBar" v-show="$route.meta.navShow">
      <ul>
        <router-link
          :class="item.classname"
          :to="item.link"
          tag="li"
          v-for="item in list"
          :key="item.link"
        >
          <img :src="item.img" alt="" />
          <img :src="item.imgOn" alt="" />
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
import home from '@/assets/images/icons/home.png'
import homeOn from '@/assets/images/icons/home-on.png'

import movie from '@/assets/images/icons/movie.png'
import movieOn from '@/assets/images/icons/movie-on.png'

import ticket from '@/assets/images/icons/ticket.png'
import ticketOn from '@/assets/images/icons/ticket.png'

import cinema from '@/assets/images/icons/cinema.png'
import cinemaOn from '@/assets/images/icons/cinema-on.png'

import user from '@/assets/images/icons/user.png'
import userOn from '@/assets/images/icons/user-on.png'
export default {
  data() {
    return {
      list: [
        {
          link: '/home',
          img: home,
          imgOn: homeOn,
          classname: '',
        },
        {
          link: '/movie',
          img: movie,
          imgOn: movieOn,
          classname: '',
        },
        {
          link: '/ticket',
          img: ticket,
          imgOn: ticketOn,
          classname: 'special',
        },
        {
          link: '/cinema',
          img: cinema,
          imgOn: cinemaOn,
          classname: '',
        },
        {
          link: '/user',
          img: user,
          imgOn: userOn,
          classname: '',
        },
      ],
      current:"animate__animated animate__fadeIn"
    }
  },
  watch: {
    $route: function(to, from) {
      // console.log(to,from)
      var toPath = to.path.split('/').length
      var fromPath = from.path.split('/').length
      // 根据路径长度得变化判断是进入行为还是后退行为
      console.log(toPath,fromPath)
      if (toPath > fromPath) {
        // 进入行为
        this.current = 'animate__animated animate__slideInRight'
      } else if (toPath < fromPath) {
        //
        this.current = 'animate__animated animate__slideInLeft'
      } else {
        this.current = 'animate__animated animate__fadeIn'
      }

      console.log(this.current);
    },
  },
}
</script>
<style lang="scss" scoped>
body {
  background-color: #22262d;
}
.tabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 236px;
  background: url(~@/assets/images/icons/movie-bg.png) no-repeat center;
  background-size: 100% 100%;
  z-index: 2;
  ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    li {
      margin-top: 75px;
      img {
        width: 64px;
      }
      img:nth-child(2) {
        display: none;
      }
    }
    .router-link-active {
      img {
        display: none;
      }
      img:nth-child(2) {
        display: block;
      }
    }
    .special {
      img {
        width: 116px;
        margin-top: -100px;
      }
    }
  }
}
</style>
